<template>
  <view class="comment-center">

    <!-- 选项卡 -->
    <view class="tabs">
      <view :class="['tab-item', currentTab === 0 ? 'active' : '']" @click="switchTab(0)">
        评论我的
      </view>
      <view :class="['tab-item', currentTab === 1 ? 'active' : '']" @click="switchTab(1)">
        我的评论
      </view>
    </view>

    <!-- 评论列表 -->
    <view class="comment-list">
      <!-- 评论我的 -->
      <view class="tab-content" v-if="currentTab === 0">
        <view class="comment-item" v-for="(item, index) in commentMeList" :key="item.id">

          <view class="comment-header">
            <view class="satisfaction-tag">{{ getSatisfactionText(item.score) }}</view>
            <view class="star-container">
              <text class="star" v-for="(star, starIndex) in 5" :key="starIndex">
                <text :class="starIndex < item.score ? 'active' : ''">★</text>
              </text>
            </view>
            <view>
              <text class="date">发布于{{ formatDate(item.create_time) }}</text>
            </view>
          </view>
          <text class="comment-content">{{ item.content }}</text>

          <!-- 图片展示 -->
          <view class="comment-images" v-if="item.images && item.images.length > 0">
            <view class="image-item" v-for="(img, imgIndex) in item.images" :key="imgIndex">
              <image :src="img" mode="aspectFill"></image>
            </view>
          </view>

          <view class="comment-tag" @click="goToDetail(item.title)">
            {{ item.title || '查看详情' }}
            <uni-icons type="right" size="16" color="#0E1C37"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 我的评论 -->
      <view class="tab-content" v-else>
        <view class="comment-item" v-for="(item, index) in myCommentList" :key="item.id">
          <view class="comment-header">
            <view class="satisfaction-tag">{{ getSatisfactionText(item.score) }}</view>
            <view class="star-container">
              <text class="star" v-for="(star, starIndex) in 5" :key="starIndex">
                <text :class="starIndex < item.score ? 'active' : ''">★</text>
              </text>
            </view>
            <text class="date">发布于{{ formatDate(item.create_time) }}</text>
          </view>

          <text class="comment-content">{{ item.content }}</text>

          <!-- 图片展示 -->
          <view class="comment-images" v-if="item.images && item.images.length > 0">
            <view class="image-item" v-for="(img, imgIndex) in item.images" :key="imgIndex">
              <image :src="img" mode="aspectFill"></image>
            </view>
          </view>

          <view class="comment-tag" @click="goToDetail(item.title)">
            {{ item.title || '查看详情' }}
            <uni-icons type="right" size="16" color="#0E1C37"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      currentTab: 0,
      commentMeList: [],
      myCommentList: [],
      pageMe: 1,
      pageMy: 1,
      limit: 10,
      totalMe: 0,
      totalMy: 0,
      loading: false
    };
  },
  mounted() {
    this.getCommentsToMe();
  },
  methods: {
    switchTab(tabIndex) {
      this.currentTab = tabIndex;
      if (tabIndex === 0 && this.commentMeList.length === 0) {
        this.getCommentsToMe();
      } else if (tabIndex === 1 && this.myCommentList.length === 0) {
        this.getMyComments();
      }
    },
    goToDetail(title) {
      // 这里根据实际需求调整跳转逻辑
      uni.navigateTo({
        url: `/pages/detail/detail?title=${encodeURIComponent(title || '')}`
      });
    },
    getSatisfactionText(score) {
      if (score >= 5) return '非常满意';
      if (score >= 4) return '满意';
      if (score >= 3) return '一般';
      if (score >= 2) return '不满意';
      return '非常不满意';
    },
    formatDate(dateString) {
      // 格式化日期，例如：2025-07-06 13:10:00 -> 2025-07-06
      if (!dateString) return '';
      return dateString.split(' ')[0];
    },
    async getCommentsToMe(append = false) {
      if (this.loading) return;
      this.loading = true;
      try {
        const res = await request({
          url: 'Commentcenter/commentsToMe',
          method: 'GET',
          data: {
            page: this.pageMe,
            limit: this.limit
          }
        });
        if (res.code === 1) {
          if (append) {
            // 追加数据
            this.commentMeList = [...this.commentMeList, ...res.data];
          } else {
            // 替换数据
            this.commentMeList = res.data;
          }
          this.totalMe = res.total;
        } else {
          uni.showToast({
            title: res.msg || '获取评论失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
        console.error('获取评论我的数据失败:', error);
      } finally {
        this.loading = false;
      }
    },
    async getMyComments(append = false) {
      if (this.loading) return;
      this.loading = true;
      try {
        const res = await request({
          url: 'Commentcenter/myComments',
          method: 'GET',
          data: {
            page: this.pageMy,
            limit: this.limit
          }
        });
        if (res.code === 1) {
          if (append) {
            // 追加数据
            this.myCommentList = [...this.myCommentList, ...res.data];
          } else {
            // 替换数据
            this.myCommentList = res.data;
          }
          this.totalMy = res.total;
        } else {
          uni.showToast({
            title: res.msg || '获取我的评论失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
        console.error('获取我的评论数据失败:', error);
      } finally {
        this.loading = false;
      }
    },
    onReachBottom() {
      // 检查是否正在加载中
      if (this.loading) return;
  
      // 根据当前选项卡决定加载哪类评论
      if (this.currentTab === 0) {
        // 检查是否还有更多数据
        if (this.commentMeList.length < this.totalMe) {
          this.pageMe++;
          this.getCommentsToMe(true);
        }
      } else {
        if (this.myCommentList.length < this.totalMy) {
          this.pageMy++;
          this.getMyComments(true);
        }
      }
    }
  }
};
</script>

<style lang="scss">
.comment-center {
  background-color: #F2F3F8;
  min-height: 100vh;
  padding: 15rpx;

  .tabs {
    display: flex;
    border-bottom: 1rpx solid #eee;

    .tab-item {
      padding: 20rpx;
      text-align: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 32rpx;
      color: #888B9A;
      position: relative;
      margin-right: 80rpx;

      &.active {
        color: #333;
        font-weight: 600;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: calc(50% - 2rpx);
          transform: translateX(-50%);
          width: 68rpx;
          height: 7rpx;
          background: #BEFF32;
          border-radius: 0rpx 5rpx 5rpx 0rpx;
        }
      }
    }
  }

  .comment-list {
    padding: 20rpx 16rpx;

    .tab-content {
      .comment-item {
        background-color: #fff;
        border-radius: 26rpx;
        padding: 24rpx;
        margin-bottom: 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
        position: relative;

        .comment-header {
          display: flex;
          justify-content: start;
          align-items: center;
          margin-bottom: 16rpx;

          .satisfaction-tag {
            background-color: #FFF3EB;
            border-radius: 5rpx;
            padding: 3rpx 15rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22rpx;
            color: #F76F17;
            text-align: center;
            margin-right: 16rpx;
          }

          .star-container {
            display: flex;
            align-items: center;
            margin-right: 16rpx;
          }

          .star {
            font-size: 38rpx;
            color: #ddd;
            margin-right: 2rpx;
            font-weight: 700;

            .active {
              color: #F76F17;
              text-shadow: 0 1rpx 2rpx rgba(255, 184, 0, 0.3);
            }
          }

          .date {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22rpx;
            color: #888B9A;
          }
        }

        .comment-content {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 26rpx;
          color: #0E1C37;
          line-height: 42rpx;
          margin-bottom: 20rpx;
          display: block;
          padding-right: 20rpx;
        }

        .comment-images {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 20rpx;

          .image-item {
            width: 160rpx;
            height: 160rpx;
            margin-right: 16rpx;
            margin-bottom: 16rpx;
            border-radius: 10rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .comment-tag {
          width: 606rpx;
          height: 84rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 26rpx;
          color: #0E1C37;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20rpx;
          background-color: #EEF2F3;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>